<template>
  <card-slot class="center articles">
    <template #title>
      <div class="w-[150px]">🎯 Articles</div>
    </template>

    <template #page>
      <div>04</div>
    </template>

    <div class="articles-main">
      <div
        class="articles-main-item articles-main-left f-c-c mr-[30px]"
        @click="navigateTo('/articles')"
      >
        <div class="pointer text-center text-[#fff]">
          <div class="text-[2.5rem]">博文精选</div>
          <div class="text-[#eee] my-[10px]">有趣的人记录有趣的事</div>
          <div>发现更多</div>
        </div>
      </div>

      <div class="articles-main-item articles-main-right">
        <div
          class="articles-main-item-word pointer mb-[20px] flex justify-between text-[#929292] opacity-[0.7] hover:opacity-[1] hover:text-[#333]"
          v-for="(item, index) in optionList"
          :key="index"
          @click="navigateTo(`/articles/${item.id}`)"
        >
          <div class="word-top w-[68%]">
            <h2 class="ellipsisTwo">
              {{ item.title }}
            </h2>
            <div class="my-[10px]">
              {{ item.content }}
            </div>
            <div>{{ item.time }}</div>
          </div>
          <img
            class="w-[30%] max-h-[160px] rounded-[10px]"
            :src="item.src"
            alt=""
          />
        </div>
      </div>
    </div>
  </card-slot>
</template>

<script setup lang="ts">
const optionList = ref([
  {
    title: "vue设计模式",
    content:
      "本文将详细介绍在常见的 Vue 项目中使用的一些实用套路和最佳实践。这些内容包括如何构建组件、管理状态、优化性能、以及与其他前端框架和工具的集成。通过这些知识，您将能够更有效地开发和维护 Vue 应用程序，提高工作效率和代码质量。",
    time: " 2024-02-22 13:43:19 发布",
    src: getImageAbsolutePath("rjdzkf.jpg"),
    id: 1,
  },
  {
    title: "vue设计模式",
    content:
      "本文将详细介绍在常见的 Vue 项目中使用的一些实用套路和最佳实践。这些内容包括如何构建组件、管理状态、优化性能、以及与其他前端框架和工具的集成。通过这些知识，您将能够更有效地开发和维护 Vue 应用程序，提高工作效率和代码质量。",
    time: " 2024-02-22 13:43:19 发布",
    src: getImageAbsolutePath("rjdzkf.jpg"),
    id: 1,
  },
  {
    title: "vue设计模式",
    content:
      "本文将详细介绍在常见的 Vue 项目中使用的一些实用套路和最佳实践。这些内容包括如何构建组件、管理状态、优化性能、以及与其他前端框架和工具的集成。通过这些知识，您将能够更有效地开发和维护 Vue 应用程序，提高工作效率和代码质量。",
    time: " 2024-02-22 13:43:19 发布",
    src: getImageAbsolutePath("rjdzkf.jpg"),
    id: 1,
  },
  {
    title: "vue设计模式",
    content:
      "本文将详细介绍在常见的 Vue 项目中使用的一些实用套路和最佳实践。这些内容包括如何构建组件、管理状态、优化性能、以及与其他前端框架和工具的集成。通过这些知识，您将能够更有效地开发和维护 Vue 应用程序，提高工作效率和代码质量。",
    time: " 2024-02-22 13:43:19 发布",
    src: getImageAbsolutePath("rjdzkf.jpg"),
    id: 1,
  },
  {
    title: "vue设计模式",
    content:
      "本文将详细介绍在常见的 Vue 项目中使用的一些实用套路和最佳实践。这些内容包括如何构建组件、管理状态、优化性能、以及与其他前端框架和工具的集成。通过这些知识，您将能够更有效地开发和维护 Vue 应用程序，提高工作效率和代码质量。",
    time: " 2024-02-22 13:43:19 发布",
    src: getImageAbsolutePath("rjdzkf.jpg"),
    id: 1,
  },
]);
</script>

<style scoped lang="less">
.articles {
  margin-top: 20px;

  .articles-main {
    display: flex;
    justify-content: space-between;

    .articles-main-item {
      border-radius: 5px;
    }

    .articles-main-left {
      background-image: url("@/assets/img/articles.jpg");
      background-size: cover;
      background-position: center;
      width: 30%;
    }

    .articles-main-right {
      width: 70%;
    }
  }
}

@media screen and (max-width: 950px) {
  .articles-main {
    flex-direction: column;
  }

  .articles-main-left {
    width: 100% !important;
    height: 200px !important;
    margin-bottom: 30px;
  }

  .articles-main-right {
    width: 100% !important;
  }
}

@media screen and (max-width: 800px) {
  .articles-main-item-word {
    flex-direction: column;
  }

  .word-top {
    width: 100%;
  }

  img {
    width: 100%;
    margin-top: 20px;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
  }
}
</style>
